<template lang="pug">
.production-page-wrapper
  .scroll-nav-container
    cube-scroll-nav(:side="true"
                    :data="productions"
                    :current="current"
                    :options="scrollOptions"
                    @change="changeHandler"
                    @sticky-change="stickyChangeHandler"
                    v-if="productions && productions.length")

      //- 通过bar插槽自定义左侧导航菜单
      //- 使用cube-scroll-nav-bar组件做自定义导航菜单
      //- 文案前增加icon
      //- 文案后增加数量
      template(v-slot:bar="props")
        cube-scroll-nav-bar(direction="vertical" 
                            :labels="props.labels"
                            :txts="barTxts"
                            :current="props.current")
          template(v-slot="props")
            .context
              SupportIcon.icon(v-if="props.txt.type>=1"
                          :size=4
                          :type="props.txt.type")
              span.name {{props.txt.name}}
              Bubble.count(v-if="props.txt.count" :num="props.txt.count")            

      //- label:左侧导航项的索引值
      //- title:左侧导航项的显示文案
      cube-scroll-nav-panel(v-for="(item,index) in productions" 
                            :key="index"
                            :label="item.name"
                            :title="item.name")
        ul.food-list
          li.food-list-item(v-for="food in item.foods" 
                    :key="food.name"
                    @click="selectProduction(food)")
            .food-list-item-img
              img.img(:src="food.icon")
            .food-list-item-detail
              .title {{food.name}}
              .description {{food.description}}
              .count-and-rating
                span.sellCount 月售{{food.sellCount}}份
                span.rating 好评率{{food.rating}}%
              .price
                span.yuan ￥
                span.now {{food.price}}
                span.old ￥{{food.oldPrice}}
            .cart-control-container
              CartControl(:production="food" @addEvent="onAdd")
  .shop-cart-container(@click="shopCartClick")
    //- vue中常量boolean值也必须用变量传递方法
    ShopCart(:selectedProductions="selectedList" 
              :deliveryPrice="seller.deliveryPrice" 
              :minPrice="seller.minPrice"
              :enableClickTwice="false"
              ref="shopCart")

</template>

<script>
import {mapState} from 'vuex'
import ShopCart from '~/components/shop-cart/shop-cart'
import CartControl from '~/components/cart-control/cart-control'
import SupportIcon from '~/components/support-icon/support-icon'
import Bubble from '~/components/bubble/bubble'

export default {

  data() {
    return {
      scrollOptions: {
        click: false,
        directionLockThreshold: 0
      },

      current: this.productions&&this.productions.length ? this.productions[0].name : '',

      fetched: false,

      selectedProduction: {}
    }
  },

  computed: {
    // 全局变量
    ...mapState({
      // 商品列表
      productions: 'productions',
      // 商家信息
      seller: 'seller'
    }),

    // 选中的商品列表
    selectedList() {
      let retList = []
      this.productions.forEach((group) => {
        group.foods.forEach((production)=>{
          if(production.count) {
            retList.push(production)
          }
        })
      })
      return retList
    },

    // 计算左侧商品分类合计数
    barTxts() {
        let ret = []
        this.productions.forEach((productionArray) => {
            const { type, name, foods } = productionArray
            let count = 0
            foods.forEach((food) => {
                // food默认是没有count属性的
                count += food.count || 0
            })
            ret.push({
                type,
                name,
                count
            })
        })
        return ret
    }
  },

  components: {
    ShopCart,
    CartControl,
    SupportIcon,
    Bubble
  },

  methods: {
    changeHandler(label) {
      console.log('changed to:', label)
    },

    stickyChangeHandler(current) {
      console.log('sticky-change', current)
    },

    //- 获取数据
    async fetch() {

      //- 用vue的route对象从url中获取查询参数
      const sellerId = this.$route.query.id

      // 避免重复获取数据
      console.log('fetch')
      console.log(this.fetched)
      if(this.fetched)
        return

      await this.$store.dispatch('getProducts', sellerId)
      this.fetched = true

      console.log('获取productions')
      console.log(this.productions)
    },

    shopCartClick() {
      console.log('shopCartClick')
      console.log(this.selectedList)
      console.log(this.productions)
    },

    // 将添加按钮的DOM对象传递给ShopCart组件
    onAdd(el) {
      // 调用ShopCart组件的drop方法
      // 触发小球下落动画
      this.$refs.shopCart.drop(el)
    },

    // 商品点击事件
    selectProduction(food) {
      this.selectedProduction = food
      this.showProductionDialog()
    },

    showProductionDialog() {
      this.productionDialog = this.productionDialog || this.$createProduction({
        $props: {
          production: 'selectedProduction',
          selectedList: 'selectedList',
          deliveryPrice: this.seller.deliveryPrice,
          minPrice: this.seller.minPrice
        }
      })
      this.productionDialog.show()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.production-page-wrapper
  position:absolute
  top:0
  left:0
  width:100%
  height:100%
  .scroll-nav-container
    position:absolute
    bottom 52px
    top:0
    left:0
    width:100%
    .cube-scroll-nav
      posistion:re
      >>> .cube-sticky-fixed
        background-color:$color-white
        line-height:24px
      >>> .cube-scroll-wrapper
        width: 80px
      >>> .cube-scroll-nav-bar-item
        white-space: normal
        text-align: left
        .context
          position:relative
          .icon
            vertical-align: top
          .name
            vertical-align: top
            line-height:16px
            margin-left:2px
          .count
            position:absolute
            right:-4px
            top:-16px
      >>> .cube-scroll-nav-bar-item_active
        color:$color-red
      .food-list
        .food-list-item
          position:relative
          margin:18px 0 18px 18px
          .food-list-item-img
            display:inline-block
            vertical-align:top
            .img
              width:60px
              height:60px
          .food-list-item-detail
            display:inline-block
            margin-left:10px
            .title
              margin-top:2px 
              font-size: 16px
              line-height:16px
              color:$color-dark-grey
            .description
              margin-top:8px
              font-size:10px
              color:$color-light-grey
              line-height:10px
            .count-and-rating
              margin-top:8px
              font-size:10px
              color:$color-light-grey
              line-height:10px
              .rating
                margin-left:12px
            .price
              margin-top:8px
              .yuan
                font-size:11px
                color:$color-red
                font-weight:700
                line-height:24px
              .now
                font-size:18px
                color:$color-red
                font-weight:700
                line-height:24px
              .old
                margin-left:8px
                font-size:11px
                color:$color-light-grey
                font-weight:normal
                line-height:24px
                text-decoration: line-through
          .cart-control-container
            position:absolute
            display:inline-block
            right:10px
            bottom:0
  .shop-cart-container
    position: absolute
    bottom:0
    left:0
    z-index:100
    width:100%

</style>